import React, { Component } from 'react';
import { Button, Form, Input, Spin, notification } from 'antd';
import { LockOutlined, MailOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'

// 引入自定义的组件
import ForgetPasswd from '../ForgetPasswd'
// 引入自定义操作
import {DoLogin, DoLoginEmailSaga} from '../../redux/actions/login'
import { DoRegister } from '../../redux/actions/register'
import { ChangeForgetPasswdActivate } from '../../redux/actions/forgetpasswd'


// 用户登录表单
class EmailNormalLoginForm extends Component {

    onFinish = (values: any) => {
        console.log('Received values of form: ', values);
        this.props.DoLoginEmailSaga(values)
        this.props.DoLogin({spinning:true})
    };

    // 登录错误的提示
    openNotificationWithIcon = (obj, type='error') => {
      // console.log(obj)
      this.props.DoLogin({
        login_email_error:false, // 用户邮箱登录错误
        login_passwd_error: false
      })
      notification[type]({
        message: '错误提示',
        description:
          obj.isUsernameEmail ? '系统检测该邮箱不存在,请您检查输入的邮箱是否正确' : '系统检测用户密码输入错误,请您重新输入密码'
      });
    };

    // 登录成功的提示
    openNotificationWithIconSuccess = (type='success') => {
      notification[type]({
        message: '登录成功',
        description:
          '祝您找到自己的需要'
      });
    };

    // 点击改变注册状态
    handleRegister = () => {
      const obj = {isRegister: true}
      this.props.DoRegister(obj)
      const obj1 = {
        activate: false, 
        email_login: false, 
        spinning: false, // 登录的时候,如果尚未成功会弹出,loading
        login_user_error:false, // 用户名错误
        login_email_error:false, // 用户邮箱登录错误
        login_passwd_error: false
      }
      this.props.DoLogin(obj1)
    }

    // 设置一个钩子函数,页面刷新的时候,进行刷新
    componentDidUpdate() {
      const {LoginState, UserLoginState} = this.props
      let obj = {isUsernameEmail: false}
      UserLoginState.isLogin
      ?
      this.openNotificationWithIconSuccess()
      :
        LoginState.login_email_error
        ?
        // 用户名错误
        this.openNotificationWithIcon({...obj, isUsernameEmail:true})
        :
          LoginState.login_passwd_error
          ?
          // 密码错误
          this.openNotificationWithIcon(obj)
          :
          console.log()
    }


    render () {
      const {LoginState} = this.props
      return (
        <div>
          <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
        >
          <Form.Item
            name="email"
            rules={[{ type: 'email',required: true, message: '请输入您的邮箱' }]}
          >
            <Input 
                prefix={<MailOutlined className="site-form-item-icon" />} 
                placeholder="邮箱账号" 
                allowClear={true}   
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入您的密码' }]}
          >
            <Input.Password
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="密码"
              // allowClear={true}  
            />
          </Form.Item>
          <Spin spinning={LoginState.spinning} tip="登录中......">
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                登录
              </Button>
            </Form.Item>
          </Spin>
          <Form.Item className='login_footer'>
            <a onClick={this.handleRegister}>注册新用户</a>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <a className="login-form-forgot" onClick={()=>(
                this.props.ChangeForgetPasswdActivate({activate: true}),
                this.props.DoLogin({activate: false})
              )}>忘记密码</a>
          </Form.Item>
          </Form>
          <ForgetPasswd />
        </div>
      );
    };
  }

  export default connect(
    state => ({
        LoginState: state.LoginReducer.login,
        UserLoginState: state.PublicReducer.userLoginState
      }),
      {
        DoLogin,
        DoLoginEmailSaga,
        DoRegister,
        ChangeForgetPasswdActivate
      }
  )(EmailNormalLoginForm)